<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Django下利用Uploadify组件上传图片</title>
    <link href="/media/plugin/uploadify214/uploadify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="/media/plugin/uploadify214/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/media/plugin/uploadify214/swfobject.js"></script>
    <script type="text/javascript" src="/media/plugin/uploadify214/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#file_upload').uploadify({
                'uploader'  : '/media/plugin/uploadify214/uploadify.swf',
                'script'    : '{%url uploadCartoonImgs %}',
                'cancelImg' : '/media/plugin/uploadify214/cancel.png',
                'folder'    : '/upload',
                'auto'      : true,//
                'multi': true,//设置可以上传多个文件
                'queueSizeLimit':128,//设置可以同时20个文件
                'removeCompleted':false,//
                'sizeLimit':10240000,//设置上传文件大小单位kb
                'fileExt':'*.jpg;*.gif;*.png;*.bmp;',//设置上传文件类型为常用图片格式
                'fileDesc':'Image Files',
                'scriptData':{'tname':unescape(encodeURI('{{ name }}'))},
                'onInit': function () {},
                'onError' : function (event,ID,fileObj,errorObj) {
                    $('#id_span_msg').html("上传失败，错误码:"+errorObj.type+" "+errorObj.info);
                },
                'onSelect': function (e, queueId, fileObj) {
                    $('#id_span_msg').html("");
                },
                'onAllComplete': function (event, data) {
                    if(data.filesUploaded>=1){
                        $('#id_span_msg').html("上传成功！");
                    }
                }
            });
        });
    </script>

</head>
<body>
<table border="1px" cellspacing="0px">
    <tr>
        <th align=left width="20%">Name</th>
        <th align=left width="20%">Path</th>
        <th align=left width="5%">Episodes</th>
        <th align=left width="10%">Company</th>
        <th align=left width="5%">Date</th>
        <th align=left width="10%%">Formats</th>
        <th align=left width="15%">Pictures</th>
    </tr>

    {% for cartoon in results %}
        <tr>
            <td width="20%">{{ cartoon.name }}</td>
            <td width="20%">{{ cartoon.path }}</td>
            <td width="5%">{{ cartoon.episodeNum }}</td>
            <td width="10%">{{ cartoon.company }}</td>
            <td width="5%">{{ cartoon.date|date:"Y-m-d" }}</td>
            <td width="10%">
                {% for format in cartoon.vFormats.all %}
                    <p>{{ format }}</p>

                {% endfor %}


            </td>

            <td width="15%">
                {% for pic in cartoon.cartoonpicture_set.all %}
                    <a href="{{ pic.getImgUrl }}" width="60" height="40" rel="lightbox[{{ pic.pname }}]">
                        <img src={{ pic.getThumbUrl }}>
                    </a>
                {% endfor %}
            </td>
            <td width="10%">
                <a href="{{ cartoon.getId }}/edit" target=”_blank”>编辑</a>
                <a href="{{ cartoon.getId }}/deletecartoonpre" target=”_blank”>删除</a>
            </td>
        </tr>
    {% endfor %}
</table>
<p>Congratulations, cartoon {{ name }} has added successly.
<a href="/cartoon/addcartoon" >Continue</a></p>
<p>Or, Do you want to upload pictures?</p>
<div class="demo-box">
    <input id="file_upload" type="file" name="Filedata">
    <input type="hidden" name="aname" value="{{ name }}">

    <div id="file_uploadQueue" class="uploadifyQueue"></div>
    <p><input type="button" value="上传" onclick="javascript:$('#file_upload').uploadifyUpload()">
        <input type="button" value="取消上传图片" onclick="javascript:$('#file_upload').uploadifyClearQueue()">
    </p>
    <p><span id="id_span_msg"></span></p>
    <p>{{ addResult }}</p>
</div>
</body>
</html>